
function enEsperaJugador1()
{
    $("#mensajes").html("<p>Eres el Jugador 1. <em>Estamos en espera de tu rival</em></p>")
}
/* Función para inicializar el escenario. */
function dibujarEscenario(jsonRecibido)
{
    $("body").css("overflow", "hidden");
    var Canvas = document.getElementById("fondo");
    Canvas.width = Canvas.width;
    var CanvasCTX = Canvas.getContext("2d");
    var img = new Image();
    img = document.getElementById("Gramilla");
    CanvasCTX.drawImage(img, 0, 0);
    var tanque1X = jsonRecibido.tanque1X;
    var tanque1Y = jsonRecibido.tanque1Y;
    var orientacionT1 = jsonRecibido.orientacionT1;
    dibujarUnTanque("tanque1", tanque1X, tanque1Y, orientacionT1);
    var tanque2X = jsonRecibido.tanque2X;
    var tanque2Y = jsonRecibido.tanque2Y;
    var orientacionT2 = jsonRecibido.orientacionT2;
    dibujarUnTanque("tanque2", tanque2X, tanque2Y, orientacionT2);
    dibujarPiloto(jsonRecibido);
    dibujarSombra();
    if (jsonRecibido.jugador == "jugador1")
    {
         $("#mensajes").html("<p>Eres el Jugador 1. <em>La partida ha comenzado</em></p>")
    }
    else
    {
         $("#mensajes").html("<p>Eres el Jugador 2. <em>La partida ha comenzado</em></p>")
    }
 
}
function dibujarSombra()
{
    var sombraCanvas = document.getElementById("sombra");
    sombraCanvas.width = sombraCanvas.width;
    var sombraCanvasCTX = sombraCanvas.getContext("2d");
    sombraCanvasCTX.fillStyle = "rgba(0,0,0,1)";
    sombraCanvasCTX.fillRect(0, 0, 1245, 700);
    sombraCanvasCTX.globalCompositeOperation = 'destination-out';
}
function iluminarMapa(jsonRecibido)
{
    console.log("iluminarMapa para: "+jsonRecibido.jugador);
    switch (jsonRecibido.jugador)
    {
        case "jugador1" :
            iluminarPiloto(jsonRecibido);
            break;
            case "jugador2" :
            iluminarTanques(jsonRecibido);
            break;
    }

}

function dibujarProyectil(jsonRecibido)
{
    var proyX = jsonRecibido.objetivoX;
    var proyY = jsonRecibido.objetivoY;
    var explosion = jsonRecibido.explosion;
    var proyectilCanvas = document.getElementById("proyectil");
    proyectilCanvas.width = proyectilCanvas.width;
    var proyectilCanvasCTX = proyectilCanvas.getContext("2d");
    var img = new Image();
    var idImagen = "expTanque" + explosion.toString();
    img = document.getElementById(idImagen);
    proyectilCanvasCTX.drawImage(img, proyX - 35, proyY - 50);
}
function eliminarActor(jsonRecibido)
{
    var posicionObjetivoX = jsonRecibido.posicionObjetivoX;
    var posicionObjetivoY = jsonRecibido.posicionObjetivoY;
    if (jsonRecibido.actor == 'piloto')
    {
        var pilotoCanvas = document.getElementById("piloto");
        pilotoCanvas.width = pilotoCanvas.width;
        var pilotoCanvasCTX = pilotoCanvas.getContext("2d");
        var img = new Image();
        img = document.getElementById("ataud");
        pilotoCanvasCTX.drawImage(img, posicionObjetivoX, posicionObjetivoY);
    }
}
function moverDrone(jsonRecibido)
{
    console.log("EN MOVERDRONE JSDIBUJAR");
    var droneX = jsonRecibido.droneX;
    var droneY = jsonRecibido.droneY;
    var orientacion = jsonRecibido.orientacion;
    var droneCanvas = document.getElementById("drone");
    droneCanvas.width = droneCanvas.width;
    var droneCanvasCTX = droneCanvas.getContext("2d");
    var img = new Image();
    var idImagenDrone = darImagenDronePorOrientacion(orientacion, 
    jsonRecibido.x);
    img = document.getElementById(idImagenDrone);
    droneCanvasCTX.drawImage(img, droneX - 50, droneY - 50);
}

function darImagenDronePorOrientacion(orientacion, x)
{
     if(x)
     {
        switch(orientacion)
        {  
           case 0:
                 return 'droneX0';
                 break;
           case 45:
                 return 'droneX90';
                 break;
           case 90 :
                 return 'droneX90';
                 break; 
           case 135:
                 return 'droneX90';
                 break;
           case 180:
                 return 'droneX180';
                 break;
           case 225:
                 return 'droneX270';
                 break;
           case 270 :
                 return 'droneX270';
                 break;   
           case 315:
                 return 'droneX270';
                 break;
        }
     }
     else
     {
        switch(orientacion)
        {  
           case 0:
                 return 'drone0';
                 break;
           case 45:
                 return 'drone90';
                 break;
           case 90 :
                 return 'drone90';
                 break; 
           case 135:
                 return 'drone90';
                 break;
           case 180:
                 return 'drone180';
                 break;
           case 225:
                 return 'drone270';
                 break;
           case 270 :
                 return 'drone270';
                 break;   
           case 315:
                 return 'drone270';
                 break;   
        }
     }
}
function terminarPartida(jsonRecibido)
{
    if (jsonRecibido.jugadorGanador == queJugador)
    {
        $("#mensajes").html("<p>Has ganado la partida. <em>Felicidades</em></p>");
        terminarPartidaGanador();
    }
    else
    {
        if (jsonRecibido.jugadorGanador == "empate"){
            $("#mensajes").html("<p>Se ha producido un empate. <em>Vuelve a intentarlo</em></p>");
            terminarPartidaEmpate();
        }
        else{
            $("#mensajes").html("<p>Has perdido. <em>Vuelve a intentarlo</em></p>");
            terminarPartidaPerdedor();
        }
    }
    //websocket.close();
}


function romperArbol(jsonRecibido)
{
    var arbolX = jsonRecibido.posicionObjetivoX;
    var arbolY = jsonRecibido.posicionObjetivoY;
    var arbolesCanvas = document.getElementById("arboles");
    var arbolesCanvasCTX = arbolesCanvas.getContext("2d");
    var img = new Image();
    
    var x = Math.floor((Math.random()*2)+1);
    if(x == 1)
    {
        var idImagen = "crater1";
    }
    else
    {
        var idImagen = "crater2";
    }
    img = document.getElementById(idImagen);
    arbolesCanvasCTX.drawImage(img, arbolX, arbolY);   
}

function dibujarArboles(jsonRecibido)
{
    console.log("ENTRE A DIBUJAR ARBOL EN JSDIBUJAR");
    if (jsonRecibido.arreglo != null)

    {
        var arbolX = jsonRecibido.arreglo[0].posX;
        var arbolY = jsonRecibido.arreglo[0].posY;
        var arbolesCanvas = document.getElementById("arboles");
        arbolesCanvas.width = arbolesCanvas.width;
        var arbolesCanvasCTX = arbolesCanvas.getContext("2d");
        var img = new Image();

        for(var i = 0; i < jsonRecibido.arreglo.length; i++)
        {

            var x = Math.floor((Math.random()*4)+1);
            if(x == 1)
            {
                var nombreArbol = "arbol1";
            }
            else if(x == 2)
            {
                var nombreArbol = "arbol2";
            }
            else if(x == 3)
            {
                var nombreArbol = "arbol3";
            }
            else if(x == 4)
            {
                var nombreArbol = "arbol4";
            }
            img = document.getElementById(nombreArbol);
            arbolesCanvasCTX.drawImage(img, jsonRecibido.arreglo[i].posX, jsonRecibido.arreglo[i].posY);
        }
    }
}

function dibujarVistaLateral(jsonRecibido)
{
        var canvasVistaLateral = document.getElementById("vistaLateral");
        canvasVistaLateral.width = canvasVistaLateral.width;
        var ctx = canvasVistaLateral.getContext("2d");
        var imgFondo = new Image();
        imgFondo = document.getElementById("Lateral");
        ctx.drawImage(imgFondo, 0 , 0);
    
        var tanque1CentroY = jsonRecibido.tanque1CentroY;
        var tanque2CentroY = jsonRecibido.tanque2CentroY;
        var tanque1X = jsonRecibido.tanque1X;
        var tanque2X = jsonRecibido.tanque2X;
        orientacionT1 = jsonRecibido.orientacionT1;
        orientacionT2 = jsonRecibido.orientacionT2;
        var x = jsonRecibido.clickDerechoX;
        var y = jsonRecibido.clickDerechoY;

        if((tanque1CentroY <= (y+50)) && (tanque1CentroY >= (y-50)))
        { 
            dibujarTanqueLateral("tanque1VistaLateral", tanque1X, orientacionT1);
        }
        if((tanque2CentroY <= (y+50)) && (tanque2CentroY >= (y-50)))
        {
            dibujarTanqueLateral("tanque2VistaLateral", tanque2X, orientacionT2);
        }
}

function terminarVistaLateral()
{
    var canvas = document.getElementById("vistaLateral");
    canvas.width = canvas.width;
    var context = canvas.getContext("2d");
    context.fillStyle = "rgba(0,0,0,1)";
    context.fillRect(0, 0, 1245, 700);
    context.clearRect(0, 0, canvas.width, canvas.height);
    var canvasT1 = document.getElementById("tanque1VistaLateral");
    canvasT1.width = canvasT1.width;
    var contextT1 = canvasT1.getContext("2d");
    contextT1.fillStyle = "rgba(0,0,0,1)";
    contextT1.fillRect(0, 0, 1245, 700);
    contextT1.clearRect(0, 0, canvasT1.width, canvasT1.height);
    var canvasT2 = document.getElementById("tanque2VistaLateral");
    canvasT2.width = canvasT2.width;
    var contextT2 = canvasT2.getContext("2d");
    contextT2.fillStyle = "rgba(0,0,0,1)";
    contextT2.fillRect(0, 0, 1245, 700);
    contextT2.clearRect(0, 0, canvasT2.width, canvasT2.height);
    var canvasA = document.getElementById("avionVistaLateral");
    canvasA.width = canvasA.width;
    var contextA = canvasA.getContext("2d");
    contextA.fillStyle = "rgba(0,0,0,1)";
    contextA.fillRect(0, 0, 1245, 700);
    contextA.clearRect(0, 0, canvasA.width, canvasA.height);
    var canvasB = document.getElementById("bomba");
    canvasB.width = canvasB.width;
    var contextB = canvasB.getContext("2d");
    contextB.fillStyle = "rgba(0,0,0,1)";
    contextB.fillRect(0, 0, 1245, 700);
    contextB.clearRect(0, 0, canvasB.width, canvasB.height);
}
function vistaRayosX(jsonRecibido)
{
    var sombraCanvas = document.getElementById("sombra");
    var sombraCanvasCTX = sombraCanvas.getContext("2d");
    for(var i = 0; i < jsonRecibido.arreglo.length; i++)
    {
        sombraCanvasCTX.fillStyle = "rgb(255,0,0)";
        sombraCanvasCTX.fillRect((jsonRecibido.arreglo[i].ocupanteX) * 5, (jsonRecibido.arreglo[i].ocupanteY) * 5, 5, 5);
    }
    
}

window.onbeforeunload=function()
{
    //verificamos si el checkbox esta marcado
    
    //mostramos un mensaje al usuario avisandole
    websocket.close();
};
